<template>
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center">
        <!-- <el-row>
        <el-col :span =8>
            <div class="ad">=====</div>
        </el-col>
        <el-col :span =8>-->
        <div>
            <img alt="Vue logo" src="../assets/logo.png" />

            <el-form
                class="loginForm"
                :ref="mainForm"
                :model="user"
                :rules="rules"
                style="max-width:400px"
            >
                <el-form-item prop="username" class="loginItem">
                    <el-input v-model.trim="user.username">
                        <template slot="prepend">账号:</template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password" class="loginItem">
                    <el-input v-model="user.password" ref="pwd">
                        <template slot="prepend">密码:</template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-edit" @click="loginByPwd()">登录</el-button>
                    <el-button
                        type="warning"
                        icon="el-icon-remove"
                        @click="() => $router.push('/reg')"
                    >注册</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- </el-col>
            <el-col :span =8>
                <div class="ad" >=====</div>
            </el-col>
        </el-row>-->
    </div>
</template>

<script>
// import New from './components/New.vue';
import { mapMutations } from 'vuex';
export default {

    name: "Login",
    components: {
        // New,Old,
    },
    props: {
        sampleP: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            sampleD: 'value',
            user: {
                username: "zhangjiu001",
                password: "114477",
            },
            mainForm: 'loginForm',
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: 'blur' },

                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            }
        }
    },
    computed: {
        // sampleC() {
        //     return this.sampleD+'--';
        // }
    },
    created() {
    },
    mounted() {
        let k = this.$route.params.username;
        if (k) {
            this.user.username = k;
            this.user.password = "";
            this.$refs['pwd'].focus();
        }
    },
    methods: {
        ...mapMutations(['setUserDetail', 'setAuth']),

        loginByPwd: function() {
            this.$notify({                
message: 'debug: ' + JSON.stringify(
                    this.user)            
});

            let url = "/login";
            this.$refs[this.mainForm].validate((valid) => {
                // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                if (valid) {
                    this.$http({
                        method: 'post',
                        url: url,
                        data: "username=" + this.user.username + "&password=" + this.user.password,
                    }).then(res => {

                        this.$message.warning(res.data.username + " 登录成功" + res.data.nickname);
                        this.setUserDetail({
                            username: res.data.username,
                            userId: res.data.userId,
                            nickname: res.data.nickname,
                            lastLoginTime: res.data.lastLoginTime,
                        });
                        this.setAuth(true);
                        // this.setUserDetail({
                        this.$router.push("/manager");
                        //     username: res.data.username,
                        //     userId: res.data.userId,
                        //     nickname:res.data.nickname,
                        // });
                        //
                        //     "userId":1,"username":"zhangjiu001","password":"114477","nickName":"???","isEnable":tr

                    }).catch(res => console.log("hi 登录异常哟" + JSON.stringify(res)));
                } else {
                    this.$message.warning(JSON.stringify("validate mistake"))
                }
            });

        },

    },
    watch: {
        // sampleC(newValue, oldValue) {
        //
        // }
    },
}
</script>

<style scoped>
/*<style lang='scss' scoped>*/
.loginForm {
    background-color: #fafafa;
    width: 100vw;
    margin: 0 auto;
    border-radius: 10px;
}
.loginItem {
    margin: 5px auto;
    padding: 10px;
}
.ad {
    background-color: rgba(193, 230, 86, 0.71);
}
</style>